<template>
	<view class="container">
		<navbar :config="config" backColor="#000"></navbar>
		<div class="tabB" :style="{top:tabTop+'px'}">
			<view class="tabBox">
				<view :class="{active:selTabIndex==0}" @click="switchTab(0)">
					商城订单
					<view class="bottomView" v-if="selTabIndex==0"></view>
				</view>
				<!--        <view :class="{active:selTabIndex==2}" @click="switchTab(2)">实体店订单</view> -->
				<view :class="{active:selTabIndex==3}" @click="switchTab(3)">
					线下订单
					<view class="bottomView" v-if="selTabIndex==3"></view>
				</view>

				<!-- <view :class="{active:selTabIndex==1}" @click="switchTab(1)">加盟订单</view> -->
			</view>
			<view class="order-type" v-if="selTabIndex == 0">
				<view class="tabView" :class="{'active': isChange == item.value}" v-for="(item,index) in orderType"
					:key="index" @click="clickBtn(item.value)">
					{{item.label}}
				</view>
			</view>
		</div>
		<view class="bigbox" :class="selTabIndex == 0 ? 'bigbox0' : 'bigbox3'">
			<view v-if="listdata.length>0">
				<template v-if="selTabIndex == 0">
					<view class="ppsPd" v-for="(item,index) in listdata" :key="item.id">
						<!-- style="padding-bottom: 30rpx;" -->
						<view class="u-flex-center-sb" style="align-items: center;">
							<view class="u-flex" style="align-items: center;">
								<!-- <text class="iconfont2 u-font40" style="padding-top: 2rpx;color: #3775F6;">&#xe611;</text> -->
								<text class="shop_nameView">{{item.shop_name}}</text>
								<!-- <text style="margin-top: 4rpx;" class="u-CCC right-icon iconfont">&#xe6c7;</text> -->
							</view>
							<text class="order_statusView">{{item.order_status}}</text>
						</view>
						<view>
							<view class="goodsItem">
								<image :src="item.goods_img" class="goodsItemImage" mode=""></image>
								<view class="goodsItemRight">
									<view class="goodsItemRightTitle">{{item.goods_title}}</view>
									<view class='goodsItemRightBottom'>
										<text class="specifications"
											v-if="item.sku_set_name">规格：{{item.sku_set_name}}</text>

										<view class="botPrice">
											<view class="botPrice-left">
												<rich-text :nodes="$mUtil.priceBigSmall(item.sale_price)"></rich-text>
											</view>
											<view v-if="item.number" class="botPrice-right">x
												{{item.number}}
											</view>
										</view>

									</view>
									<view class="contribution-txt">贡献值：{{item.consumption_value}}
										<view v-if="item.number" class="botPrice-right">x {{item.number}}</view>
									</view>
								</view>
							</view>
						</view>

						<view class="botList">
							<view class="botListItem">
								<view class="botListItemLeft">购买人</view>
								<text class="botListItemRight">{{item.user_info.nickname}}</text>
							</view>
							<view class="botListItem">
								<view class="botListItemLeft">下单时间</view>
								<text class="botListItemRight">{{item.create_time}}</text>
							</view>
							<view class="botListItem">
								<view class="botListItemLeft">所得贡献值</view>
								<view class="botListItemRight">
									<rich-text :nodes="$mUtil.priceBigSmall(item.able_gains, false)"></rich-text>
								</view>
							</view>

							<view class="botListItem" v-if="item.balance_gains > 0" style="margin-bottom: 0;">
								<view class="botListItemLeft">所得金额</view>
								<view class="botListItemRight">
									<rich-text :nodes="$mUtil.priceBigSmall(item.balance_gains, false)"></rich-text>
								</view>
							</view>
						</view>
						<image :src="imgUrl+'/user/bottomLine.png'" class="bottomLine"></image>
						<!-- <view class="bottomLine"></view> -->
					</view>
				</template>
				<template v-if="selTabIndex == 3">
					<view class="backView"></view>
					<view class="offline">
						<view class="order-item" v-for="item in listdata" :key="item.id">
							<view class="order-num">
								<view class="label">订单号：</view>
								<view class="value">{{item.offline_order.order_code}}</view>
							</view>
							<view class="order-num">
								<view class="label">下单时间：</view>
								<view class="value">{{item.create_time}}</view>
							</view>
							<view class="order-num">
								<view class="label">消费金额：
								</view>
								<view class="value">{{item.offline_order.sales_money}}</view>
							</view>

							<view class="order-num">
								<view class="label">打赏积分：
								</view>
								<view class="value">{{item.offline_order.shop_consume_integral_able}}</view>
							</view>
							<view class="order-num" style="margin-bottom: 0;">
								<view class="label">所得收益：</view>
								<view class="value">{{item.income_point}}</view>
							</view>
							<image :src="imgUrl+'/user/bottomLine.png'" class="bottomLine"></image>
						</view>

					</view>
				</template>
				<loadMore v-if="listdata.length>0" :status="status"></loadMore>

			</view>
			<nodata v-else :config="{top:20,content:'暂无数据~'}"></nodata>
		</view>

	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '推广订单',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				isChange: 0,
				// orderType: ["全部订单", "已付款", "已完成", "已结算"],
				orderType: [{
						label: "全部订单",
						value: ""
					},
					{
						label: "已付款",
						value: 1
					},
					{
						label: "已完成",
						value: 2
					},
					{
						label: "已结算",
						value: 3
					},
				],
				listdata: [],
				status: 'more', //more|loading|noMore
				noData: false,
				parmas: {
					page: 1,
					limit: 10,
					status: '',
					// user_order_gains_type: 0
				},
				tabTop: 0,
				selTabIndex: 0
			}
		},
		onReachBottom(e) {
			this.status = 'loading'
			this.parmas.page++
			if (this.selTabIndex == 0) {
				this.listData()
			} else {
				this.getOfflineorderincome()
			}

		},
		onPullDownRefresh() {
			this.rest()
			if (this.selTabIndex == 0) {
				this.listData()
			} else {
				this.getOfflineorderincome()
			}

		},

		onLoad() {
			this.tabTop = app.globalData.barHeight + 44;
			this.listData()

		},
		methods: {
			switchTab(index) {
				this.selTabIndex = index;
				this.parmas.page = 1;
				this.listdata = []
				if (this.selTabIndex == 0) {
					this.parmas.user_order_gains_type = index;
					this.listData()
				} else {
					this.getOfflineorderincome()
				}
			},
			rest() {
				this.parmas.page = 1
				this.listdata = []
			},
			listData() {
				this.$http.get('/userordergains/pages', this.parmas).then(async res => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.listdata = this.listdata.concat(res.page.list)
						if (this.listdata.length == 0) {
							this.noData = true
						} else {
							this.noData = false
						}
						if (res.page.totalPage <= res.page.currPage) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
				})
			},
			getOfflineorderincome() {
				this.$http.get('/offlineorderincome/page', this.parmas).then(async res => {
					if (res && res.code == 200) {
						uni.stopPullDownRefresh()
						this.listdata = this.listdata.concat(res.page.list)
						if (this.listdata.length == 0) {
							this.noData = true
						} else {
							this.noData = false
						}
						if (res.page.totalPage <= res.page.currPage) {
							this.status = 'noMore'
						} else {
							this.status = 'more'
						}
					}
				})
			},
			clickBtn(index) {
				this.isChange = index
				if (index == 0) {
					this.parmas.status = ''
				} else {
					this.parmas.status = index
				}
				this.rest()
				this.listData()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.tabBox {
		display: flex;
		justify-content: space-around;
		background-color: #F6F6F6;
		width: 750rpx;
		height: 85rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;


		>view {
			font-size: 30rpx;
			padding: 22rpx 0;
			color: #474747;
			position: relative;
			// font-weight: 700;
		}

		>.active {
			color: #FF211F;

			// &::after {
			//   display: block;
			//   width: 100%;
			//   height: 4rpx;
			//   content: "";
			//   background: #3775F6;
			//   position: absolute;
			//   bottom: 0;
			//   left: 0;
			//   border-radius: 2rpx;
			// }
		}
	}

	.good-text {
		font-weight: 700;

	}


	.opacity {
		opacity: 0.9;
	}

	.rightText {
		margin-top: 4rpx;
	}

	.contribution-txt {
		font-weight: 400;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 27rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	// .bigbox {
	//   margin-top: 200rpx;
	// }

	.bigbox0 {
		margin-top: 177rpx;
		background-color: #fff;
	}

	.bigbox3 {
		margin-top: 88rpx;
		background-color: #fff;
	}

	.ppsPd {
		padding: 38rpx;
		padding-bottom: 0;
	}

	.goodsItem {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 38rpx;
	}

	.umb20 {
		margin-bottom: 20rpx;
	}

	.wt112 {
		width: 140rpx;
	}

	.img30 {
		width: 30rpx;
		height: 30rpx;
	}

	.tabB {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 66;
		background-color: #F6F6F6;
		// background: #FFFFFF;
	}

	.order-type {
		height: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 19rpx 0;


		.type-name {
			border-radius: 30px;
			padding: 12rpx 30rpx;
			display: inline-block;
			background: #ECECEC;
			border-radius: 30rpx;
			color: #474747;
		}

		.active {
			background-color: #FF211F;
			color: #fff;
		}
	}

	.wd-bgImg {
		position: relative;
		padding: 25rpx 0rpx;

		image {
			width: 100%;
			height: 200rpx;
			vertical-align: bottom;
		}

		.moneyInfo {
			position: absolute;
			top: 25rpx;
			width: 92%;

			.mt40 {
				margin-top: 40rpx;
			}

			.detail-btn button {
				height: 56rpx;
				line-height: 30rpx;
				border-radius: 28px;
				opacity: 0.82;
				padding: 10rpx 30rpx;
				background-color: #EED9A9;
				color: #0B844A;
			}
		}
	}

	.wdInput {
		background-color: #FFFFFF;
		border-radius: 18rpx 18rpx 0px 0rpx;
		padding: 40rpx 22rpx 32rpx;

		.input {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 60rpx;
			border-bottom: 1rpx solid #D9D9D9;
			padding-bottom: 25rpx;

			input {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
			}
		}
	}

	.bg-fff {
		background-color: #FFFFFF;
		padding: 26rpx 22rpx 36rpx;
		border-radius: 0rpx 0rpx 18px 18rpx;
	}

	.ml46 {
		margin-left: 46rpx;
	}

	.apply-btn {
		margin-top: 114rpx;

		button {
			background: #0B844A;
			color: #FFFFFF;
		}
	}

	.zfb-wx {
		padding-bottom: 24rpx;

		.payIcon {
			color: #00aaef;
			font-size: 32rpx;
			margin-right: 18rpx;
		}

		.wxIcon {
			color: rgb(37, 171, 56);
			font-size: 32rpx;
			margin-right: 18rpx;
		}
	}

	.zhInput input {
		width: 62%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0rpx 20rpx;
		border: 1rpx solid #D9D9D9;
		border-radius: 6rpx;
	}

	.popup {
		width: 100%;

		.bg-top {
			background-color: #F5F5F5;
			padding: 20rpx 30rpx;
			border-radius: 18rpx 18rpx 0px 0px;
		}

		.bankCardList {
			background-color: #FFFFFF;
			padding: 0rpx 30rpx;
			padding-bottom: 185rpx;

			.item {
				height: 84rpx;
				line-height: 84rpx;

				image {
					width: 48rpx;
					height: 42rpx;
					margin-top: 20rpx;
					vertical-align: bottom;
				}

				.rh-br {
					width: 100%;
					border-bottom: 1rpx solid #E6E6E6;
				}

				.pull-right {
					float: right !important;
				}
			}
		}
	}

	.ml56 {
		margin-left: 56rpx;
	}

	.ml200 {
		margin-left: 200rpx;
	}

	.offline {
		width: 750rpx;
		height: auto;
		background: #FFFFFF;



		.order-item {
			// border-bottom: 1rpx solid #f2f2f2;
			padding: 38rpx;
			padding-top:0;

			.order-num {
				margin-bottom: 10rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 27rpx;

				.label {
					font-weight: 400;
					font-size: 27rpx;
					color: #333333;
					line-height: 27rpx;
				}

				.value {
					font-weight: 400;
					font-size: 27rpx;
					color: #333333;
					line-height: 27rpx;
				}
			}
		}

		
	}
	.order-item:nth-child(1) {
		padding: 38rpx;
	}

	.bottomView {
		width: 46rpx;
		height: 4rpx;
		background: #FF211F;
		margin-top: 7rpx;
		margin-left: 31rpx;
	}

	.tabView {
		font-weight: 400;
		font-size: 23rpx;
		color: #333333;
		line-height: 23rpx;
		padding: 15rpx 27rpx;
		background: rgba(0, 0, 0, 0.03);
		border-radius: 15rpx;
	}

	.shop_nameView {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
	}

	.order_statusView {
		font-weight: 400;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 27rpx;
	}

	.goodsItemImage {
		width: 135rpx;
		height: 135rpx;
	}

	.goodsItemRight {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 519rpx;
		height: auto;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.goodsItemRightTitle {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
		text-align: justified;
		font-style: normal;
		text-transform: none;
		margin-bottom: 11rpx;

	}

	.specifications {
		font-weight: 400;
		font-size: 19rpx;
		color: #999999;
		line-height: 19rpx;
		margin-bottom: 11rpx;
	}

	.botPrice {
		font-weight: 400;
		font-size: 27rpx;
		color: #FF211F;
		line-height: 27rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.botPrice-left {}


	}

	.botPrice-right {
		font-weight: 400;
		font-size: 23rpx;
		color: #FF211F;
		line-height: 23rpx;
		margin-left: 11rpx;
	}

	.goodsItemRightBottom {
		height: 56rpx !important;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 11rpx;

	}

	.botList {
		width: 673rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 38rpx;

		// align-items: center;
		.botListItem {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 27rpx;
		}
	}

	.bottomLine {
		width: 100%;
		height: 2rpx;
		background-color: #f5f5f5;
		margin-top: 38rpx;
	}

	.botListItemLeft {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
	}

	.botListItemRight {
		font-weight: 400;
		font-size: 27rpx;
		color: #333333;
		line-height: 27rpx;
	}

	.backView {
		width: 100%;
		height: 19rpx;
		background: #F9F9F9;
	}
</style>